import React from 'react';
import { Layout, Typography, Space, Avatar, Dropdown, Menu } from 'antd';
import { UserOutlined, SettingOutlined, LogoutOutlined } from '@ant-design/icons';
import './AppHeader.css';

const { Header } = Layout;
const { Title } = Typography;

const AppHeader: React.FC = () => {
  const userMenu = (
    <Menu>
      <Menu.Item key="profile" icon={<UserOutlined />}>
        个人资料
      </Menu.Item>
      <Menu.Item key="settings" icon={<SettingOutlined />}>
        设置
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item key="logout" icon={<LogoutOutlined />}>
        退出登录
      </Menu.Item>
    </Menu>
  );

  return (
    <Header className="app-header">
      <div className="header-content">
        <div className="header-left">
          <Title level={3} className="app-title">
            🤖 辅助决策系统
          </Title>
        </div>
        <div className="header-right">
          <Space size="large">
            <div className="status-indicator">
              <span className="status-dot online"></span>
              <span className="status-text">系统运行中</span>
            </div>
            <Dropdown overlay={userMenu} placement="bottomRight">
              <div className="user-info">
                <Avatar icon={<UserOutlined />} />
                <span className="username">管理员</span>
              </div>
            </Dropdown>
          </Space>
        </div>
      </div>
    </Header>
  );
};

export default AppHeader;
